<template>
  <div class="process-preview">
    <div class="header">
      <div class="container-search">
        <Select
          :options="modelList"
          :field-names="{ label: 'name', value: 'id'}"
          class="model-list"
          placeholder="请选择需要加载的流程"
          @change="handleChange"
        />
        <Button @click="doSave">保存</Button>
      </div>
    </div>
    <div class="main">
      <Spin tip="Loading..." :spinning="modelInfoLoading">
        <div class="diagram">
          <BpmnDesigner ref="bpmnDesignerRef" v-if="modelInfo&& modelInfo.modelXml" :model-info="modelInfo"/>
          <div v-else class="diagram-empty">
            请选择流程模板或输入流程实例进行预览！
          </div>
        </div>
<!--        <div>
          <ApproveHistory/>
        </div>-->
      </Spin>
    </div>
  </div>
</template>

<script>
import BpmnDiagram from './BpmnDiagram.vue'
import BpmnDesigner from './BpmnDesigner.vue'
import ApproveHistory from './ApproveHistory.vue'
import {getHighLightedNodeVoByProcessInstanceId, getModelById, getModelList} from "@/api/base";
import {Input, Button, InputSearch, Select, Spin, message} from "ant-design-vue";

export default {
  name: 'BpmnPreview',
  components: {
    Select, Spin, Input, Button, InputSearch,
    BpmnDiagram,
    BpmnDesigner,
    ApproveHistory
  },
  data() {
    return {
      xmlStr: '',
      modelInfoLoading: false,
      modelList: [],
      procInstId: '',
      modelInfo: {},
    }
  },
  props: {
    msg: String
  },
  mounted() {
    getModelList().then(res => {
      const {data, success} = res;
      this.modelList = data;
    }).catch(e=>{
      console.error(e);
    })
  },

  methods: {
    doSave(){
      this.$refs.bpmnDesignerRef.getXml().then(res=>{

        console.log(res);
      });

    },
    handleChange(value) {
      this.modelInfoLoading = true;
      this.modelInfo = {};
      getModelById(value).then(res => {
        const {data, success} = res;
        this.modelInfo = {modelXml: data.modelXml};
        this.modelInfoLoading = false;
      })
    },

    handleSearch(value) {
      if(!value || value.trim() === ''){
        message.warn('请输入流程实例ID');
        return;
      }
      this.modelInfoLoading = true;
      this.modelInfo = {};
      getHighLightedNodeVoByProcessInstanceId(value.trim()).then(res => {
        const {data, success} = res;
        this.modelInfo = data;
        this.modelInfoLoading = false;
      }).catch(res=>{
        console.log(res);
        this.modelInfoLoading = false;
      });
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.ant-spin-nested-loading {
  height: 100%;

  .ant-spin-container {
    height: 100%;
  }
}
</style>
<style scoped lang="less">
.process-preview {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    .container-search {
      width: 400px;
      margin: auto;
      min-height: 100px;
      position: absolute;
      bottom: 0;
      z-index: 999999999;
      .search-box {
        width: 300px;
      }
    }
  }

  .main {
    flex: 1;
    box-shadow: inset 0px 0px 0px 2px #3ff300;
    overflow-y: auto;
    padding: 10px;

    .diagram {
      flex-grow: 1;
      min-height: 300px;
      height: 100%;
      .diagram-empty{
        color: #ddd;
        font-size: 20px;
        text-align: center;
        line-height: 300px;
      }
    }
  }
}

.model-list {
  width: 400px;
  margin: 10px auto;
}
</style>
